<template>
	<view class="add-wearer">
		<view class="add-wearer-title">
			<text style="font-size: 30rpx;" v-if="star_review">星梦保视力档案</text>
			<text style="font-size: 30rpx;" v-else>视力档案填写</text>
			<text class="title-cancel" @click="cancel">关闭</text>
		</view>
		<scroll-view scroll-y style="width: 100%; padding: 20rpx; background-color: white; flex: 1; overflow: scroll; box-sizing: border-box;">
			<view style="display: flex;flex-direction: column;align-items: center;" :style="{'pointer-events':star_review?'none':''}">
				<view class="add-wearer-row" v-if="star">
					<text class="label">手机号</text>
					<input class="input" placeholder="预留手机号" v-model="Mobile"/>
					<text v-if="mobileError" class="error-hint">手机号有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">验配时间</text>
					<picker mode="date" :value="matchDate" :start="startDate" :end="endDate" class="input" @change="matchDateChange" >
						<view class="pick-value" :class="{'has-value':matchDate}">{{matchDate || "请选择"}}</view>
					</picker>
					<text v-if="matchDateError" class="error-hint">验配时间有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">请选择门店</text>
					<!-- <picker class="input" @change="chooseShop" :value="storeIndex" :range="allStores">
						<view class="pick-value" :class="{'has-value':storeIndex>=0}">{{stores[storeIndex] || "请选择"}}</view>
					</picker> -->
					<view @click="chooseShop" class="input">
						<view class="pick-value" :class="{'has-value':store}">{{store?.ShopName || "请选择"}}</view>
					</view>
					<text v-if="storeError" class="error-hint">门店有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">上传购买凭证</text>
					<image style="width: 30rpx;" src="../static/ic_upload.png" mode="widthFix"></image>
					<text v-if="buyFileError" class="error-hint">购买凭证有误</text>
				</view>
				<image v-if="buyFile" class="buy-ticket" :src="buyFileBase64" mode="heightFix"  @click="chooseBuyTicket"></image>
				<view  v-else class="buy-ticket-placeholder" @click="chooseBuyTicket">
					<text class="buy-ticket-plus">+</text>
				</view>
				<!-- <view class="bind-lens">
					<text class="label">请绑定镜片</text>
					<view style="flex: 1; display: flex; flex-direction: row;">
						<view class="bind-lens-item">
							<text>左眼(OS)</text>
							<image style="width: 90rpx; margin: 30rpx 0;" src="../static/ic_scan.png" mode="widthFix" @click="scanLeft"></image>
							<text class="scan-text">扫码识别左眼</text>
						</view>
						<view class="bind-lens-item">
							<text>右眼(OD)</text>
							<image style="width: 90rpx; margin: 30rpx 0;" src="../static/ic_scan.png" mode="widthFix" @click="scanRight"></image>
							<text class="scan-text">扫码识别右眼</text>
						</view>
					</view>
				</view> -->
				<view class="add-wearer-row">
					<text class="label">镜片条码</text>
					<view class="two-values">
						<view class="two-values-input">
							<image src="@/static/ic_search_2.png"
								@click="scanLeft"
								style="width: 40rpx; min-width: 40rpx; height: 40rpx; padding: 5rpx; box-sizing: border-box; z-index: 100;"></image>
							<input style="flex: 1;" placeholder="左镜片条码" v-model="Lbarcode"/>
						</view>
						<view class="two-values-input">
							<image src="@/static/ic_search_2.png"
								@click="scanRight"
								style="width: 40rpx; height: 40rpx; padding: 5rpx; box-sizing: border-box;"></image>
							<input style="flex: 1;" placeholder="右镜片条码" v-model="Rbarcode"/>
						</view>
					</view>
					<text v-if="barcodeError" class="error-hint">请输入绑定</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">镜片名称</text>
					<view class="two-values">
						<input class="two-values-input" placeholder="左镜片名称" v-model="LlensName"/>
						<input class="two-values-input" placeholder="右镜片名称" v-model="RlensName"/>
					</view>
					<text v-if="lensNameError" class="error-hint">镜片名称有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">镜片膜层</text>
					<view class="two-values">
						<input class="two-values-input" placeholder="左镜片膜层" v-model="LlensLayer"/>
						<input class="two-values-input" placeholder="右镜片膜层" v-model="RlensLayer"/>
					</view>
					<text v-if="lensLayerError" class="error-hint">镜片膜层有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">球镜</text>
					<view class="two-values">
						<input class="two-values-input" placeholder="-0.00" v-model="lsph"/>
						<input class="two-values-input" placeholder="-0.00" v-model="rsph"/>
					</view>
					<text v-if="sphError" class="error-hint">球镜有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">柱镜</text>
					<view class="two-values">
						<input class="two-values-input" placeholder="-0.00" v-model="lcyl"/>
						<input class="two-values-input" placeholder="-0.00" v-model="rcyl"/>
					</view>
					<text v-if="cylError" class="error-hint">柱镜有误</text>
				</view>
				<!-- <view class="add-wearer-row">
					<text class="label">轴位</text>
					<view class="two-values">
						<input class="two-values-input" placeholder="0-180" v-model="lax"/>
						<input class="two-values-input" placeholder="0-180" v-model="rax"/>
					</view>
					<text v-if="axError" class="error-hint">轴位有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">下加光</text>
					<view class="two-values">
						<input class="two-values-input" placeholder="+0.50-+1.25" v-model="LAddLight"/>
						<input class="two-values-input" placeholder="+0.50-+1.25" v-model="RAddLight"/>
					</view>
					<text v-if="addLightError" class="error-hint">下加光有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">眼轴</text>
					<view class="two-values">
						<input class="two-values-input" placeholder="16-30mm" v-model="laol"/>
						<input class="two-values-input" placeholder="16-30mm" v-model="raol"/>
					</view>
					<text v-if="aolError" class="error-hint">眼轴有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">瞳距</text>
					<view class="two-values">
						<input class="two-values-input" placeholder="16-30mm" v-model="lpd"/>
						<input class="two-values-input" placeholder="16-30mm" v-model="rpd"/>
					</view>
					<text v-if="pdError" class="error-hint">瞳距有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">瞳高</text>
					<view class="two-values">
						<input class="two-values-input" placeholder="16-30mm" v-model="lph"/>
						<input class="two-values-input" placeholder="16-30mm" v-model="rph"/>
					</view>
					<text v-if="phError" class="error-hint">瞳高有误</text>
				</view> -->
				<view class="add-wearer-row">
					<text class="label">上传验配单</text>
					<image style="width: 30rpx;" src="../static/ic_scan.png" mode="widthFix" ></image>
					<text v-if="fittingFileError" class="error-hint">验配单有误</text>
				</view>
				<image v-if="fittingFile" class="buy-ticket" :src="fittingFileBase64" mode="heightFix" @click="chooseFittingFile"></image>
				<view  v-else class="buy-ticket-placeholder" @click="chooseFittingFile">
					<text class="buy-ticket-plus">+</text>
				</view>
				<template v-if="!star_review">
					<view class="btn-cancel" @click="cancel">
						<text>取消</text>
					</view>
					<view class="btn-save" @click="confirm">
						<text>{{ star ? "激活星梦保" : "保存" }}</text>
					</view>
				</template>
			</view>
		</scroll-view>

		<uni-popup ref="popupSelectShop" type="center" :isMaskClick="false">
			<selectShop
				@onCancel="onCancelSelectShop"
				@onConfirm="onConfirmSelectShop"
			></selectShop>
		</uni-popup>
	</view>
</template>

<script>
	import selectShop from './select_shop.vue'
	import { mapState } from 'vuex'
	import {isValidSPH, urlTobase64, checkModbile} from '../pages/common/utils'
	import { SecurityCodeCheck } from '../store/api'
	export default {
		props: {
			star: Boolean,
			star_review: Boolean,
		},
		components: {
			selectShop,
		},
		mounted() {
			console.log('add_doc mount');
			this.Mobile = this.userInfo.Mobile;
		},
		data() {
			const currentDate = this.getDate({
			    format: true
			});
			return {
				VhId: '',
				matchDate: currentDate, // 验配时间
				matchDateError: false,
				store: null,
				storeError: false,
				Lbarcode: '',
				Rbarcode: '',
				barcodeError: false,
				buyFile: '',
				buyFileName: '',
				buyFileError: false,
				lsph: '',
				rsph: '',
				sphError: false,
				lcyl: '',
				rcyl: '',
				cylError: false,
				lax: '',
				rax: '',
				axError: false,
				laol: '',
				raol: '',
				aolError: false,
				lpd: '',
				rpd: '',
				pdError: false,
				lph: '',
				rph: '',
				phError: false,
				fittingFile: '', // 验配单
				fittingFileName: '',
				fittingFileError: false,
				LlensName: '',
				RlensName: '',
				lensNameError: false,
				LlensLayer: '',
				RlensLayer: '',
				lensLayerError: false,
				LAddLight: '',
				RAddLight: '',
				addLightError: false,

				// 星梦保额外字段
				Mobile: '',
				mobileError: false,
			}
		},
		watch: {
			docEditItem(newVal) {
				// console.log('docEditItem change', newVal);
				if (newVal) {
					this.matchDate = newVal.FittingDate;
					this.store = this.allStores.find(item => {
						return item.ShopCode === newVal.ShopCode;
					})
					this.Lbarcode = newVal.Lbarcode;
					this.Rbarcode = newVal.Rbarcode;
					urlTobase64(newVal.BuyVoucher).then((res) => {
						this.buyFile = res;
						const paths1 = newVal.BuyVoucher.split('/')
						this.buyFileName = paths1[paths1.length - 1]
					}).catch((err) => {
						console.error('urlTobase64 BuyVoucher', err)
						this.buyFile = '';
						this.buyFileName = '';
					})
					urlTobase64(newVal.FittingList).then((res) => {
						this.fittingFile = res;
						const paths2 = newVal.FittingList.split('/')
						this.fittingFileName = paths2[paths2.length - 1]
					}).catch((err) => {
						this.fittingFile = '';
						this.fittingFileName = ''
						console.error('urlTobase64 FittingList', err)
					})
					this.lsph = newVal.Lsph;
					this.rsph = newVal.Rsph;
					this.lcyl = newVal.Lcyl;
					this.rcyl = newVal.Rcyl;
					this.lax = newVal.Lax;
					this.rax = newVal.Rax;
					this.laol = newVal.Laol;
					this.raol = newVal.Raol;
					this.lpd = newVal.Lpd;
					this.rpd = newVal.Rpd;
					this.lph = newVal.Lph;
					this.rph = newVal.Rph;
					this.LlensName = newVal.LlensName;
					this.RlensName = newVal.RLensName;
					this.LlensLayer = newVal.LlensLayer;
					this.RlensLayer = newVal.RlensLayer;
					this.LAddLight = newVal.LAddLight;
					this.RAddLight = newVal.RAddLight;
					this.VhId = newVal.VhId;
					this.resetError();
				} else {
					this.reset();
					this.resetError();
				}
			},
		},
		methods: {
			chooseShop() {
				this.$refs.popupSelectShop.open();
			},
			onCancelSelectShop() {
				this.$refs.popupSelectShop.close();
			},
			onConfirmSelectShop(data) {
				this.$refs.popupSelectShop.close();
				this.store = data;
			},
			matchDateChange(e) {
				this.matchDate = e.detail.value;
			},
			chooseBuyTicket() {
				let _this = this;
				uni.chooseImage({
					count:1,
					success: (ret) => {
						console.log("chooseImage", ret)
						const { tempFiles } = ret;
						if (tempFiles.length > 0) {
							// this.buyFile = tempFiles[0];
							uni.getFileSystemManager().readFile({
								filePath: tempFiles[0].path,
								encoding: 'base64',
								success: (ret) => {
									// console.log('read file', ret)
									_this.buyFile = ret.data;
									const paths = tempFiles[0].path.split('/')
									_this.buyFileName = paths[paths.length - 1]
								},
								fail: (err) => {
									console.error(err);
								},
							})
						}
					},
					fail: (e) => {
						console.error("chooseImage", e)
					},
				})
			},
			chooseFittingFile() {
				let _this = this;
				uni.chooseImage({
					count:1,
					success: (ret) => {
						console.log("chooseImage", ret)
						const { tempFiles } = ret;
						if (tempFiles.length > 0) {
							// this.fittingFile = tempFiles[0];
							uni.getFileSystemManager().readFile({
								filePath: tempFiles[0].path,
								encoding: 'base64',
								success: (ret) => {
									// console.log('read file', ret)
									_this.fittingFile = ret.data;
									const paths = tempFiles[0].path.split('/')
									_this.fittingFileName = paths[paths.length - 1]
								},
								fail: (err) => {
									console.error(err);
								},
							})
						}
					},
					fail: (e) => {
						console.error("chooseImage", e)
					},
				})
			},
			scanLeft() {
				console.log('scanLeft', this.Lbarcode)
				let _this = this
				if (!_this.Lbarcode) return;
				// uni.scanCode({
				// 	fail: (err) => {
				// 		console.error(err)
				// 	},
				// 	success: (ret) => {
				// 		console.log('scan ret', ret)
				// 		_this.Lbarcode = ret.result

				// 		// 查验
				// 		SecurityCodeCheck(ret.result).then((res) => {
				// 			let { ContentDes, MarkType } = res;
				// 			if (MarkType === "true") {
				// 				const ctn = JSON.parse(ContentDes);
				// 				const {
				// 					LensName,
				// 					LensLayer,
				// 					Sph,
				// 					Cyl,
				// 				} = ctn;
				// 				_this.LlensName = LensName;
				// 				_this.LlensLayer = LensLayer;
				// 				_this.lsph = Sph;
				// 				_this.lcyl = Cyl;
				// 			}
				// 		})
				// 	}
				// })
				// 查验
				uni.showLoading({
					title:"查询中"
				});
				SecurityCodeCheck(_this.Lbarcode).then((res) => {
					let { ContentDes, MarkType } = res;
					if (MarkType === "true") {
						const ctn = JSON.parse(ContentDes);
						const {
							LensName,
							LensLayer,
							Sph,
							Cyl,
						} = ctn;
						_this.LlensName = LensName;
						_this.LlensLayer = LensLayer;
						_this.lsph = Sph;
						_this.lcyl = Cyl;
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			scanRight() {
				console.log('scanRight', this.Rbarcode)
				let _this = this
				if (!_this.Rbarcode)return;
				// uni.scanCode({
				// 	fail: (err) => {
				// 		console.error(err)
				// 	},
				// 	success: (ret) => {
				// 		console.log('scan ret', ret)
				// 		_this.Rbarcode = ret.result

				// 		// 查验
				// 		SecurityCodeCheck(ret.result).then((res) => {
				// 			let { ContentDes, MarkType } = res;
				// 			if (MarkType === "true") {
				// 				const ctn = JSON.parse(ContentDes);
				// 				const {
				// 					LensName,
				// 					LensLayer,
				// 					Sph,
				// 					Cyl,
				// 				} = ctn;
				// 				_this.RlensName = LensName;
				// 				_this.RlensLayer = LensLayer;
				// 				_this.rsph = Sph;
				// 				_this.rcyl = Cyl;
				// 			}
				// 		})
				// 	}
				// })
				// 查验
				uni.showLoading({
					title:"查询中"
				});
				SecurityCodeCheck(_this.Rbarcode).then((res) => {
					let { ContentDes, MarkType } = res;
					if (MarkType === "true") {
						const ctn = JSON.parse(ContentDes);
						const {
							LensName,
							LensLayer,
							Sph,
							Cyl,
						} = ctn;
						_this.RlensName = LensName;
						_this.RlensLayer = LensLayer;
						_this.rsph = Sph;
						_this.rcyl = Cyl;
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			checkError() {
				this.matchDateError = !(this.matchDate.trim())
				this.storeError = !(this.store)
				this.buyFileError = !(this.buyFile)
				this.sphError = !isValidSPH(this.lsph) || !isValidSPH(this.rsph)
				this.cylError = !isValidSPH(this.lcyl) || !isValidSPH(this.rcyl)
				this.axError = this.lax === '' || isNaN(Number(this.lax)) || this.rax === '' || isNaN(Number(this.rax))
				this.aolError = this.laol === '' || isNaN(Number(this.laol)) || this.raol === '' || isNaN(Number(this.raol))
				this.pdError = this.lpd === '' || isNaN(Number(this.lpd)) || this.rpd === '' || isNaN(Number(this.rpd))
				this.phError = this.lph === '' || isNaN(Number(this.lph)) || this.rph === '' || isNaN(Number(this.rph))
				this.fittingFileError = !(this.fittingFile)
				this.barcodeError = !(this.Lbarcode.trim()) || !(this.Rbarcode.trim())
				this.lensNameError = !(this.LlensName.trim()) || !(this.RlensName.trim())
				this.lensLayerError = !(this.LlensLayer.trim()) || !(this.RlensLayer.trim())
				this.addLightError = !isValidSPH(this.LAddLight.trim()) || !(this.RAddLight.trim())
				this.mobileError = !checkModbile(this.Mobile)
			},
			cancel() {
				this.$emit("onCancel");
				this.reset();
			},
			confirm() {
				this.checkError()
				if (this.hasError) {
					return
				}
				const wearer = this.wearers[this.selectedWearerIndex]
				this.$emit("onConfirm", {
					WearerCode: wearer.WearerCode,
					MemberCode: wearer.WearerCode,
					VhId: this.VhId,
					FittingDate: this.matchDate,
					ShopCode: this.store.ShopCode,
					LlensName: this.LlensName,
					RlensName: this.RlensName,
					LlensLayer: this.LlensLayer,
					RlensLayer: this.RlensLayer,
					Lbarcode: this.Lbarcode,
					Rbarcode: this.Rbarcode,
					Lsph: this.lsph,
					Rsph: this.rsph,
					Lcyl: this.lcyl,
					Rcyl: this.rcyl,
					Lax: this.lax,
					Rax: this.rax,
					Laol: this.laol,
					Raol: this.raol,
					Lpd: this.lpd,
					Rpd: this.rpd,
					Lph: this.lph,
					Rph: this.rph,
					LAddLight: this.LAddLight,
					RAddLight: this.RAddLight,
					VoucherFileName: this.buyFileName,
					VoucherByte: this.buyFile,
					FittingFileName: this.fittingFileName,
					FittingByte: this.fittingFile,
					Mobile: this.Mobile,
				});
				this.reset();
			},
			reset() {
				this.matchDate = '';
				this.store = null;
				this.LlensName = '';
				this.RlensName = '';
				this.LlensLayer = '';
				this.RlensLayer = '';
				this.Lbarcode = '';
				this.Rbarcode = '';
				this.lsph = '';
				this.rsph = '';
				this.lcyl = '';
				this.rcyl = '';
				this.lax = '';
				this.rax = '';
				this.laol = '';
				this.raol = '';
				this.lpd = '';
				this.rpd = '';
				this.lph = '';
				this.rph = '';
				this.LAddLight = '';
				this.RAddLight = '';
				this.buyFile = '';
				this.buyFileName = '';
				this.fittingFile = '';
				this.fittingFileName = '';
				this.Mobile = this.userInfo.Mobile;
				this.VhId = ''
				this.resetError();
			},
			resetError() {
				this.matchDateError = false
				this.storeError = false
				this.buyFileError = false
				this.sphError = false
				this.cylError = false
				this.axError = false
				this.aolError = false
				this.pdError = false
				this.phError = false
				this.fittingFileError = false
				this.barcodeError = false
				this.lensNameError = false
				this.lensLayerError = false
				this.addLightError = false
				this.mobileError = false
			}
		},
		computed: {
			...mapState(["allStores","selectedWearerIndex","wearers", "docEditItem", "userInfo"]),
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    },
			hasError() {
				return this.matchDateError ||
					this.storeError ||
					this.buyFileError ||
					this.sphError ||
					this.cylError ||
					// this.axError ||
					// this.aolError ||
					// this.pdError ||
					// this.phError ||
					this.fittingFileError ||
					this.barcodeError ||
					this.lensNameError ||
					this.lensLayerError ||
					// this.addLightError ||
					(this.mobileError && this.star)
			},
			fittingFileBase64() {
				if (this.fittingFile.startsWith('http')) {
					return this.fittingFile
				}
				return 'data:image/jpeg;base64,' + this.fittingFile
			},
			buyFileBase64() {
				if (this.buyFile.startsWith('http')) {
					return this.buyFile
				}
				return 'data:image/jpeg;base64,' + this.buyFile
			},
		},
	}
</script>

<style>
	.add-wearer {
		display: flex;
		flex-direction: column;
		font-family: "yshst" !important;
		width: calc(100vw - 70rpx);
		height: calc(100vh - 400rpx);
		overflow: hidden;
		border-radius: 0 0 20rpx 20rpx;
	}
	.add-wearer-title {
		height: 80rpx;
		min-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: aliceblue;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}
	.add-wearer-title .title-cancel {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 25rpx;
		color: #999;
		margin-left: 10rpx;
	}
	.add-wearer-row {
		height: 80rpx;
		min-height: 80rpx;
		display: flex;
		align-items: center;
		width: 100%;
		position: relative;
	}
	.add-wearer-row .two-values {
		display: flex;
		align-items: center;
		flex-direction: row;
		/* flex: 1; */
		justify-content: space-between;
		/* background-color: aquamarine; */
	}
	.two-values .two-values-input {
		width: 220rpx;
		display: flex;
		flex-direction: row;
		/* background-color: aqua; */
	}
	.two-values-input + .two-values-input {
		margin-left: 10rpx;
	}
	.add-wearer-row .label {
		width: 180rpx;
		display: inline-block;
		/* background-color: aqua; */
	}
	.bind-lens {
		display: flex;
		flex-direction: row;
		position: relative;
		width: 100%;
	}
	.bind-lens .label {
		width: 180rpx;
		display: inline-block;
		height: 80rpx;
		min-height: 80rpx;
		line-height: 80rpx;
	}
	.bind-lens .scan-text {
		font-size: 20rpx;
	}
	.bind-lens-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		padding: 25rpx 0;
	}
	.add-wearer-row .input {
		flex: 1;
		/* background-color: red; */
		height: 100%;
		display: flex;
		align-items: center;
	}
	.add-wearer-row .pick-value {
		color: #999;
	}
	.add-wearer-row .pick-value.has-value {
		color: black;
	}
	.buy-ticket {
		width: calc(100% - 40rpx);
		height: 300rpx;
		border-radius: 25rpx;
	}
	.buy-ticket-placeholder {
		height: 300rpx;
		width: calc(100% - 40rpx);
		border-radius: 25rpx;
		background-color: aliceblue;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.buy-ticket-plus {
		font-size: 60rpx;
	}
	.btn-save {
		height: 60rpx;
		width: 270rpx;
		background-color: #50c0f9;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		/* color: white; */
		align-items: center;
		justify-content: center;
		align-self: center;
		margin: 30rpx 0;
	}
	.btn-cancel {
		height: 60rpx;
		width: 270rpx;
		background-color: #d5d5d5;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		/* color: white; */
		align-items: center;
		justify-content: center;
		align-self: center;
		margin: 30rpx 0 0 0;
	}
	.error-hint {
		font-size: 20rpx;
		color: red;
		position: absolute;
		top: 60rpx;
		left: 180rpx;
	}
</style>